<template>
  <el-dialog :visible.sync="dialogFilesVisible"
             custom-class="files_dialog"
             width="60%"
              @open="getDialogData"
             @close="cancelData">

         <el-row style="height:400px">
           <el-col :span="12">
              <el-form :model="filesData"
                 ref="filesForm"
                 label-width="140px"
                 label-position="right">
                   <el-form-item label="User Account">
                    <el-input placeholder="Please Enter Email" v-model.trim="filesData.account" style="width:90%">
                       <el-button slot="append" icon="el-icon-search" @click="getDriveData"></el-button>
                    </el-input >
                  </el-form-item>
                  <el-form-item label="Drives">
                      <el-select v-model="filesData.oneDriveNameId"
                                 clearable
                                 placeholder=""
                                  @change="getOneDriveName"
                                 v-loading="loading"
                                 style="width:90%">
                        <el-option v-for="(item,index) in oneDriveData"
                                   :key="index"
                                   :label="item.name"
                                   :value="item.id"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="File Name">
                    <el-input placeholder="" v-model.trim="filesData.searchText" style="width:90%">
                       <el-button slot="append" icon="el-icon-search" @click="handleSeach"></el-button>
                    </el-input >
                    <div class="search_result" style="width:90%;height:200px"  v-loading="searchloading">
                      <div class="result_list" @click="addFiles(item)"
                      v-for="(item,index) in searchResultList"
                      :key="index"
                      >
                       <span class="lable">{{item.name}}</span>
                      </div>

                    </div>
                  </el-form-item>
              </el-form>
            </el-col>
           <el-col :span="12">
                <el-table
                   v-loading="tableLoading"
                  :data="echoData"
                  height="355px"
                  style="width: 100%">
                  <el-table-column
                    prop="account"
                    label="User"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="oneDriveName"
                    label="Drives"
                    width="">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="File Name">
                  </el-table-column>
                  <el-table-column
                    label="Action"
                    width="">
                    <template slot-scope="scope">
                      <el-button @click="handleDeleteClick(scope.row)" type="primary" size="small">delete</el-button>
                    </template>
                 </el-table-column>
            </el-table>
           </el-col>
        </el-row>

    <div slot="footer"
         class="dialog-footer">
      <el-button @click="cancelData"
                 size="small">Cancel</el-button>
      <el-button type="primary"
                 size="small"
                 @click="saveData">Save and Sync</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data () {
    return {
      dialogFilesVisible: false,
      filesData: {
        account: '',
        oneDriveNameId: '',
        oneDriveName: '',
        searchText: ''
      },
      oneDriveData: [],
      searchResultList: [],
      loading: false,
      tableLoading: false,
      searchloading: false,
      echoData: []
    }
  },
  computed: {
  },
  props: {
    itemInfo: {
      type: Object
    }
  },
  methods: {
    getDriveData () {
      this.loading = true
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        user: this.filesData.account
      }
      this.$interface.taskManager.getDriveData(params)
        .then(({ data: res }) => {
          this.oneDriveData = res
          this.filesData.oneDriveNameId = res[0].id
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
    },
    getDialogData () {
      this.getEchoData()
    },
    getEchoData () {
      this.tableLoading = true
      const params = {
        tenantId: this.$store.state.user.tenantCode
      }
      this.$interface.taskManager.getFilesData(params)
        .then(({ data: res }) => {
          this.echoData = res
          this.tableLoading = false
        }).catch(() => {
          this.tableLoading = false
        })
    },
    getOneDriveName (val) {
      this.searchResultList = []
      this.filesData.searchText = ''
    },
    handleSeach () {
      this.searchloading = true
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        driveId: this.filesData.oneDriveNameId,
        query: this.filesData.searchText
      }
      this.$interface.taskManager.getSearchDriveFileData(params)
        .then(({ data: res }) => {
          this.searchResultList = res.filter((item) => {
            return item.name.indexOf('.csv') !== -1
            // && item['.tag'] === 'file'
          })
          this.searchloading = false
          if (this.searchResultList.length === 0) {
            this.$message.warning('File Not Found')
          }
        }).catch(() => {
          this.searchloading = false
        })
    },

    addFiles (item) {
      this.oneDriveData.forEach(item => {
        if (item.id === this.filesData.oneDriveNameId) {
          this.filesData.oneDriveName = item.name
        }
      })
      item.account = this.filesData.account
      item.oneDriveName = this.filesData.oneDriveName

      let index = this.echoData.findIndex(ele => {
        return ele.id === item.id
      })
      if (index !== -1) {
        this.echoData[index] = item
      } else {
        this.echoData.push(item)
      }
    },
    handleDeleteClick (row) {
      this.echoData.forEach((item, index) => {
        if (item.id === row.id) {
          this.echoData.splice(index, 1)
        }
      })
    },
    saveData () {
      const params = {
        tenantId: this.$store.state.user.tenantCode,
        body: this.echoData
      }
      this.$interface.taskManager.saveFilesData(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message.error('Failed to save file')
          }
          this.cancelData()
        }).catch(() => {
        })
    },

    cancelData () {
      this.filesData = {
        account: '',
        oneDriveNameId: '',
        oneDriveName: '',
        searchText: ''
      }
      this.searchResultList = []
      this.dialogFilesVisible = false
    }

  }
}
</script>
<style lang="scss" scoped>
::v-deep .files_dialog {
  height: 560px;

  .tip_title {
    margin-bottom: 20px;
  }

  .el-form-item {
    margin-bottom: 30px !important;
  }

  .el-form-item .el-form-item__label {
    text-align: right !important;
  }

  .el-dialog__footer {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }

  .search_result {
    margin-top: 15px;
    width: 80%;
    //  height: 23vh;
     overflow: auto;
    .result_list {
       position: relative;
      .el-icon-circle-check {
        position: absolute;
        right: 5px;
        top: 9px;
        color: #67c23a;

      }
      .lable {
        // padding-left: 25px;
      }
      &:hover {
        cursor: pointer;
        background-color: #f5f7fa;
      }
    }
  }

}
</style>
